<template>
	<view class="select-goods-wrap" @click="onClick">
		<image :src="pictureUrl[0]" class="select-goods-img" mode="aspectFill"></image>
		<view class="select-goods-bd">
			<view class="outer3">
				<view class="mod6" v-if="data.codCategory == 5">中药</view>
				<view class="mod5" v-if="data.codCategory == 4">西药</view>
				<view class="word3">{{ data.name }}</view>
			</view>
			<view class="txt2 nowrap">{{ data.specification }}</view>
			<view class="outer4">
				<view class="word4">{{ data.price }}</view>
				<view class="word5">元</view>
			</view>
		</view>
		<view class="select-goods-btn" v-if="type == 0" @click.stop="onClickBtn">{{ btnText }}</view>

		<view class="select-goods-tools" v-if="type == 1">
			<view class="select-goods-count">
				<view class="select-goods-add" @click.stop="onClickSub">-</view>
				<view class="select-goods-num">{{ countNum != null ? countNum : 0 }}</view>
				<view class="select-goods-sub" @click.stop="onClickAdd">+</view>
			</view>
			<!-- <view class="select-goods-unit">{{ data.westernDrugVO.unit }}</view> -->
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: Number | String,
			default: 0
		},
		data: {
			type: Object,
			default() {
				return {};
			}
		},
		unit: {
			type: String,
			default: 'g'
		},
		btnText: {
			type: String,
			default: '编辑用量'
		}
	},
	computed: {
		pictureUrl() {
			return this.data.pictureUrl.split(',');
		}
	},
	// watch: {
	// 	data(val) {
	// 		console.log(val);
	// 	}
	// },
	data() {
		return {
			countNum: 0
		};
	},
	created(option) {
		this.countNum = this.data.buyNum;
	},
	mounted() {},
	methods: { 
		onClick() {
			this.$emit('onClick');
		},
		onClickBtn() {
			this.$emit('onClickBtn');
		},
		onClickAdd() {
			if (this.countNum != 99) {
				this.countNum++;
				this.$emit('onChange', this.countNum);
			}
		},
		onClickSub() {
			if (this.countNum != 0) {
				this.countNum--;
				this.$emit('onChange', this.countNum);
			}
		}
	}
};
</script>

<style lang="less">
.select-goods-wrap {
	border-radius: 16rpx;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
	margin-bottom: 10rpx;
	width: 686rpx;
	display: flex;
	padding: 34rpx 30rpx;
	box-sizing: border-box;
	align-items: center;
	.select-goods-img {
		height: 120rpx;
		border-radius: 8rpx;
		width: 120rpx;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.select-goods-bd {
		margin-left: 30rpx;
		width: 300rpx;
		.outer3 {
			align-items: center;
			display: flex;
			.mod5 {
				height: 31rpx;
				border-radius: 4rpx;
				border: 1rpx solid rgba(35, 199, 156, 1);
				margin-top: 5rpx;
				width: 68rpx;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: column;
				background: rgba(247, 255, 253, 1);
				font-size: 20rpx;
				color: rgba(35, 199, 156, 1);
				font-family: PingFangSC-Regular;
				margin-right: 10rpx;
			}
			.mod6 {
				height: 31rpx;
				border-radius: 4rpx;
				border: 1rpx solid #806cff;
				margin-top: 5rpx;
				width: 68rpx;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: column;
				background: #f9f7ff;
				font-size: 20rpx;
				color: #806cff;
				font-family: PingFangSC-Regular;
				margin-right: 10rpx;
			}

			.word3 {
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				font-family: PingFangSC-Regular;
			}
		}

		.txt2 {
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			font-family: PingFangSC-Regula;
			margin-top: 10rpx;
		}
		.outer4 {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			.word4 {
				color: rgba(255, 65, 65, 1);
				font-size: 30rpx;
			}
			.word5 {
				color: rgba(255, 65, 65, 1);
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				margin-left: 10rpx;
			}
		}
	}

	.select-goods-btn {
		z-index: 63;
		height: 40rpx;
		border-radius: 20rpx;

		border: 1rpx solid rgba(128, 108, 255, 1);
		background-color: rgba(249, 247, 255, 1);
		width: 180rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
		margin-left: auto;
		color: rgba(128, 108, 255, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Medium;
	}

	.select-goods-btn2 {
		height: 40rpx;
		border-radius: 20rpx;
		width: 180rpx;
		border: 1rpx solid #999999;
		background-color: rgba(249, 247, 255, 1);

		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
		margin-left: auto;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFangSC-Medium;
	}

	.select-goods-tools {
		display: flex;
		align-items: center;
		margin-left: auto;
		.select-goods-count {
			height: 40rpx;
			border-radius: 20rpx;
			border-width: 1rpx;
			border: 1rpx solid rgba(220, 220, 220, 1);
			width: 124rpx;
			display: flex;
			box-sizing: border-box;

			align-items: center;
			padding: 5rpx;
			margin-right: 10rpx;
			.select-goods-add {
				height: 30rpx;
				width: 30rpx;
				border-radius: 50%;
				justify-content: center;
				align-items: center;
				background-color: #f8f8f8;
				display: flex;
				flex-direction: column;
			}
			.select-goods-num {
				width: 55rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				line-height: 24rpx;
				text-align: center;
			}
			.select-goods-sub {
				height: 30rpx;
				width: 30rpx;
				border-radius: 50%;
				background-color: #f8f8f8;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: column;
			}
		}
	}
}
</style>
